<template>
    <div>
        <el-form ref="form" :model="form" label-width="100px" style="width: 500px" >
            <el-form-item label="工程名称">
            <el-input v-model="form.name"></el-input>

          </el-form-item>
          <el-form-item label="坑壁土类型">
            <el-select v-model="form.region" placeholder="请选择类型">
              <el-option label="填土" value="填土"></el-option>
              <el-option label="淤泥" value="淤泥"></el-option>
              <el-option label="淤泥质2" value="淤泥质2"></el-option>
              <el-option label="粘性土" value="粘性土"></el-option>
              <el-option label="红性土" value="红性土"></el-option>
              <el-option label="粉土" value="粉土"></el-option>
              <el-option label="细沙" value="细沙"></el-option>
              <el-option label="中砂" value="中砂"></el-option>
              <el-option label="粗砂" value="粗砂"></el-option>
              <el-option label="硕砂" value="硕砂"></el-option>
              <el-option label="角砂" value="角砂"></el-option>
              <el-option label="圆砂" value="圆砂"></el-option>
              <el-option label="碎石" value="碎石"></el-option>
              <el-option label="卵石" value="卵石"></el-option>
              <el-option label="风化岩" value="风化岩"></el-option>
              <el-option label="中风化岩" value="中风化岩"></el-option>
              <el-option label="微风化岩" value="微风化岩"></el-option>
              <el-option label="新鲜岩" value="新鲜岩"></el-option>              
            </el-select>
          </el-form-item>
            
         
            
          </el-form-item>

          <el-form :label-position="labelPosition" label-width="300px" :model="formLabelAlign" >
            <el-form-item label="坑顶护道上的均布荷载q（kN/m²）" style="width: 500px"  >
                <el-input v-model="form.q"></el-input>
            </el-form-item>
            <el-form-item label="坑壁土的重度γ(kN/m3)" style="width: 500px">
                <el-input v-model="form.r"></el-input>
            </el-form-item>
            <el-form-item label="坑壁土的内摩擦角φ(°) " style="width: 500px">
                <el-input v-model="form.j"></el-input>
            </el-form-item>
            <el-form-item label="坑壁土粘聚力c(kN/m2)" style="width: 500px">
                <el-input v-model="form.c"></el-input>
            </el-form-item>
  

        </el-form>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">立即计算</el-button>
            <el-button type="default"  @click="exit">清空</el-button>
            </el-form-item> 
        </el-form>
        <el-popover
            placement="right"
            width="400"
            trigger="click">
            <el-table :data="gridData">
                <el-table-column width="150" property="date" label="土层名称"></el-table-column>
                <el-table-column width="100" property="name" label="土的状态"></el-table-column>
                <el-table-column width="150" property="address" label="重度(kN/m3)"></el-table-column>
            </el-table>
            <el-button slot="reference">支护设计土层强度指标（重度）</el-button>
            </el-popover>

            <el-popover
            placement="right"
            width="400"
            trigger="click">
            <el-table :data="gridData1">
                <el-table-column width="150" property="date" label="土层名称"></el-table-column>
                <el-table-column width="100" property="name" label="土的状态"></el-table-column>
                <el-table-column width="150" property="address" label="内摩擦角φ(°)"></el-table-column>
            </el-table>
            <el-button slot="reference">支护设计土层强度指标（内摩擦角φ(°)）</el-button>
            </el-popover>


            <el-popover
            placement="right"
            width="400"
            trigger="click">
            <el-table :data="gridData2">
                <el-table-column width="150" property="date" label="土层名称"></el-table-column>
                <el-table-column width="100" property="name" label="土的状态"></el-table-column>
                <el-table-column width="150" property="address" label="粘聚力c(kN/m2)"></el-table-column>
            </el-table>
            <el-button slot="reference">支护设计土层强度指标（粘聚力c(kN/m2)）</el-button>
            </el-popover>


            <template>
                <el-table
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column
                    prop="c"
                    label="坑壁土的重度γ(kN/m3)"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="j"
                    label="坑壁土的内摩擦角φ(°)"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="q"
                    label="坑壁土粘聚力c(kN/m2)"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="q"
                    label="坑顶护道上均布荷载q(kN/m2)"
                    width="180">
                  </el-table-column>
                </el-table>
                
              </template>
            

            
            


              <h1 v-if="form.h>0" align="center">土方边坡计算书</h1><br>
             <h3 v-if="form.h>0" align="center"> 计算依据：<br>
              1、《建筑基坑支护技术规程》JGJ120-2012<br>
              2、《建筑施工计算手册》江正荣编著<br>
              3、《实用土木工程手册》第三版杨文渊编著<br>
              4、《施工现场设施安全设计计算手册》谢建民编著<br>
              5、《地基与基础》第三版<br>
              本工程，基坑土质为<font color="green">{{form.region}}</font>，且地下水位低于基坑底面标高，挖方边坡可以做成直立壁不加支撑。最大允许直壁高度按以下方法计算。<br></h3>


        <h1 v-if="form.h>0" align="center"><font color="green">{{form.name}}</font>土方直立壁开挖高度计算:<br></h1>
            <h2 v-if="form.h>0" align="center" >土方最大直壁开挖高度按以下公式计算 ：<br>
                坑壁土类型选用：<font color="green">{{form.region}}</font><br>
            hmax = 2×c/(K×γ×tan(45°-φ/2))-q/γ<br>
            其中，hmax =土方最大直壁开挖高度<br>
                  γ = 坑壁土的重度(kN/m3)<br>
                  φ = 坑壁土的内摩擦角(°)<br>
                  c = 坑壁土粘聚力(kN/m2) <br>
                  K = 安全系数（一般用1.25 ）<br>
                  hmax = 2×<font color="green">{{form.c}}</font>/(1.25×<font color="green">{{form.r}}</font>×tan(45°-<font color="green">{{form.j}}</font>/2))-<font color="green">{{form.q}}</font>/<font color="green">{{form.r}}</font>=<font color="green">{{form.h}}</font>；<br>
            本工程的基坑土方立直壁最大开挖高度为<font color="green">{{form.h}}</font>m。 </h2>
            
            
    </div>

    
</template>






  <script>
    import gc from '@/api/gongcheng'
    export default {
      data() {
        return {
          form: {            
            q:'',
            r:'',
            j:'',
            c:'',
            name: '',
            h:''  ,
            region:''                    
          },

          gridData: [{
          date: '杂填土',
          name: '稍密',
          address: '16.0-18.0'
        }, 
        {
          date: '杂填土',
          name: '中密',
          address: '17.5-19.5'
        }, 
        {
          date: '淤泥',
          name: '流塑',
          address: '15.5-17.0'
        }, 
        {
          date: '叶片状淤泥',
          name: '流塑',
          address: '15.0-17.5'
        },
        {
          date: '淤泥质黏土',
          name: '流塑-软塑',
          address: '16.5-18.0'
        },
        {
          date: '粘性土',
          name: '软塑',
          address: '17.0-17.5'
        },
        {
          date: '粘性土',
          name: '可塑',
          address: '17.5-18.5'
        },
        {
          date: '粘性土',
          name: '软塑',
          address: '18.0-20.0'
        },
        {
          date: '粉土',
          name: '稍密',
          address: '18.0-19.5'
        },
        {
          date: '粉土',
          name: '中密',
          address: '18.5-20.0'
        },
        {
          date: '粉土',
          name: '密实',
          address: '18.5-20.5'
        },
        {
          date: '砂土',
          name: '松散',
          address: '17.0-18.0'
        },
        {
          date: '砂土',
          name: '稍密',
          address: '17.5-18.5'
        },
        {
          date: '砂土',
          name: '中密',
          address: '18.0-19.0'
        },
        {
          date: '砂土',
          name: '密实',
          address: '18.5-19.5'
        },
        {
          date: '砂卵(碎)石',
          name: '稍密',
          address: '19.5-21.0'
        },
        {
          date: '砂卵(碎)石',
          name: '中密',
          address: '20.5-21.5'
        },
        {
          date: '砂卵(碎)石',
          name: '密实',
          address: '21.0-22.0'
        },
        {
          date: '花岗岩残积土',
          name: '',
          address: '19.5-20.5'
        },
        {
          date: '花岗岩强风化土',
          name: '',
          address: '21.0-22.0'
        },
        ],


        //内摩擦角
        
        gridData1: [{
          date: '杂填土',
          name: '稍密',
          address: '13~15'
        }, 
        {
          date: '杂填土',
          name: '中密',
          address: '8~12'
        }, 
        {
          date: '叶片状淤泥',
          name: '流塑',
          address: '10~13'
        },
        {
          date: '淤泥质黏土',
          name: '流塑-软塑',
          address: '11~14'
        },
        {
          date: '粘性土',
          name: '软塑',
          address: '13~16'
        },
        {
          date: '粘性土',
          name: '可塑',
          address: '15~25'
        },
        {
          date: '粘性土',
          name: '软塑',
          address: '22~36'
        },
        {
          date: '粉土',
          name: '稍密',
          address: '15~20'
        },
        {
          date: '粉土',
          name: '中密',
          address: '22~28'
        },
        {
          date: '粉土',
          name: '密实',
          address: '24~32'
        },
        {
          date: '砂土',
          name: '松散',
          address: '18~32'
        },
        {
          date: '砂土',
          name: '稍密',
          address: '22~28'
        },
        {
          date: '砂土',
          name: '中密',
          address: '24~32'
        },
        {
          date: '砂土',
          name: '密实',
          address: '25~35'
        },
        {
          date: '砂卵(碎)石',
          name: '稍密',
          address: '35~35'
        },
        {
          date: '砂卵(碎)石',
          name: '中密',
          address: '35~40'
        },
        {
          date: '砂卵(碎)石',
          name: '密实',
          address: '30~45'
        },
        {
          date: '花岗岩残积土',
          name: '',
          address: '22~28'
        },
        {
          date: '花岗岩强风化土',
          name: '',
          address: '25~40'
        },
        ],

        //粘聚力
        
        gridData2: [{
          date: '杂填土',
          name: '稍密',
          address: '5~11'
        }, 
        {
          date: '杂填土',
          name: '中密',
          address: '7~13'
        }, 
        {
          date: '淤泥',
          name: '流塑',
          address: '8~11'
        },
        {
          date: '叶片状淤泥',
          name: '流塑',
          address: '9~13'
        },
        {
          date: '淤泥质黏土',
          name: '流塑-软塑',
          address: '10~15'
        },
        {
          date: '粘性土',
          name: '软塑',
          address: '11~17'
        },
        {
          date: '粘性土',
          name: '可塑',
          address: '19~28'
        },
        {
          date: '粘性土',
          name: '软塑',
          address: '22~35'
        },
        {
          date: '粉土',
          name: '稍密',
          address: '8~15'
        },
        {
          date: '粉土',
          name: '中密',
          address: '18~19'
        },
        {
          date: '粉土',
          name: '密实',
          address: '19~25'
        },
        {
          date: '砂土',
          name: '松散',
          address: '0~0'
        },
        {
          date: '砂土',
          name: '稍密',
          address: '0~0'
        },
        {
          date: '砂土',
          name: '中密',
          address: '0~0'
        },
        {
          date: '砂土',
          name: '密实',
          address: '0~0'
        },
        {
          date: '砂卵(碎)石',
          name: '稍密',
          address: '3~8'
        },
        {
          date: '砂卵(碎)石',
          name: '中密',
          address: '3~15'
        },
        {
          date: '砂卵(碎)石',
          name: '密实',
          address: '5~20'
        },
        {
          date: '花岗岩残积土',
          name: '',
          address: '15~30'
        },
        {
          date: '花岗岩强风化土',
          name: '',
          address: '20~40'
        },
        ],
        tableData: [{
            c: '',
            j: '',
            q: '',
            r:''
          }, 

        ]
          
          
        }
      },
      created(){
        //   this.onSubmit()
          

      },


      methods: {
        onSubmit() {
          gc.kaiwa(this.form)
              .then(response => {//计算成功
                this.form.h =response.data.tufangkaiwa.h
                this.tableData = response.data.tufangkaiwa
                console.log(this.tableData)
                console.log(this.form.q)
                console.log(this.form.h)
                //提示信息
                this.$message({
                  type: 'success',
                  message: '计算成功!'
                }); 
                //回到列表页面 路由跳转
                //  this.$router.push({path:'/gongcheng/tufang'})

            })
          },
          exit(){
            
            this.form={
              h:0
            }
        },
      
    }
        
    }
  
  </script>